<template>
  <view class="pures">
    <view class="pures-header" >
      <view class="pures-header-top">
        <u-navbar  :is-back="true" back-icon-color="#ffffff" :custom-back="handleBack" :background="{background: 'none'}" :is-fixed="false" :border-bottom="false">
          <view class="pures_header_title">数据总览</view>
        </u-navbar>
        <!-- 状态栏高度 -->
        <!--<view class="status-bar" :style="{'height': statusBarHeight + 'px'}"></view>-->
        <!--顶部标题栏-->
        <!--<view class="pures-header-box">
          <u-icon name="arrow-left" color="#ffffff" size="40" @click="goBackFun()" class="back-icon"></u-icon>
          <view class="pures-header-text">笔记</view>
        </view>-->
        <!--笔记类型筛选-->
        <view class="pures_header_tab">
          <u-tabs
              :list="noteTabList"
              :current="noteCurrent"
              @change="noteChange"
              count="cate_count"
              bg-color="none"
              inactive-color="#FFFFFF"
              active-color="#FFFFFF"
              item-width="33.33%"
              height="80"
              font-size="28"
              bar-width="60"
              bar-height="8"
              :active-item-style="{ color: '#FFFFFF'}"
          ></u-tabs>
        </view>
        <!-- 店铺选择 -->
        <view class="pures-header-shop">
          <shop-list-pop :AllShopsList="shopListData" :firstShop="firstShop" :isIcon="isIcon" :shopCurrent="shopCurrent" @changeShop="changeShop" :style="{color: '#ffffff', fontSize: '32rpx'}"></shop-list-pop>
          <image @click="notePopShow = true" :src="shopImgUrl + 'code_shop/note-list-head-icon.png'" style="width: 44rpx;height: 44rpx;"></image>
        </view>
      </view>
      <view class="pures-header-content">
        <view class="pures-head-tab">
          <u-tabs
              :list="headTabList"
              :current="headCurrent"
              @change="headChange"
              count="cate_count"
              bg-color="#FFFFFF"
              inactive-color="#888888"
              active-color="#FFA844"
              item-width="50%"
              height="88"
              font-size="28"
              bar-width="32"
              bar-height="8"
              :active-item-style="{ color: '#3D3D3D'}"
          ></u-tabs>
        </view>
      </view>
    </view>
    <!--页面列表滚动内容-->
    <view class="pures-content">
      <scroll-view
        scroll-y="true"
        :refresher-enabled="true"
        @refresherrefresh="onrefresherrefresh"
        :refresher-triggered="isTriggered"
        refresher-default-style="none"
        lower-threshold="30"
        @scrolltolower="onScrolltolower"
        :scroll-top="scrollTop"
        :scroll-with-animation="true"
        @scroll="onScroll"
        style="height: 100%">
        <!-- 笔记明细 -->
        <view class="pures-list">
          <!-- 加载中提示 -->
          <view class="lanjiazai_wrap" v-if="skeletonLoading">
            <view class="lanjiazai_item">
              <u-loading mode="circle" :color="'#FFA844'" size="80" ></u-loading>
              <view class="tag">加载中...</view>
            </view>
          </view>
          <!--说明文字-->
          <view class="pures-header-content-notice">
            <u-icon name="volume" color="#FF7900" size="28"></u-icon>
            <view class="pures-header-content-notice-text">{{noteText}}</view>
          </view>
          <!--<view class="pures-list-tab">
            <view class="pures-list-tab-left" @click="isTabActiveFun" :class="isTabActive ? 'pures-list-tab-active' : ''">

            </view>
            <view class="pures-list-tab-right" @click="timeClick" :class="isTabDate ? 'pures-list-tab-active' : ''">
              <text>开始/结束日期</text>
              <u-icon name="calendar" color="#888888" size="35"></u-icon>
            </view>
          </view>-->
          <!--笔记列表内容-->
          <view class="pures-list-content" >
            <view class="m_list_wrap" >

              <!--笔记列表item-->
              <note-list-item :shopsLists="orderListData" ></note-list-item>
              <!--加载更多-->
              <view class="chudijiazai">
                <u-loadmore icon-type="flower" :status="loadingstatus" font-size="24" :load-text="loadText" margin-top="30"
                            margin-bottom="30"/>
                <view v-if="Bottomingrefresh == true" class="Bottomingrefresh" @click="RefreshBtn()">立即刷新</view>
              </view>
              <view v-if="orderListData.length == 0" class="noDatas" :style="{marginTop:tabsHeight + navbarHeight + 'px'}">
                <u-empty text="暂无订单" mode="favor" icon-size="106"></u-empty>
              </view>
            </view>
          </view>
        </view>
      </scroll-view>

    </view>


    <!--筛选弹窗-->
    <u-popup v-model="notePopShow" mode="bottom" border-radius="34" >
      <view class="note-pop-wrap">
        <view v-for="(item, index) in notePopData" :key="index" class="note-pop-item">
          <view class="note-pop-item-title">{{item.title}}</view>
          <view class="note-pop-item-content">
            <view v-for="(item2,  index2) in item.list" :key="index2" class="note-pop-item-content-item" :style="{'width': item2.type == 'date' ? '210px' : ''}">
              <button v-if="item2.type  == 'text'" @click="ClickBtnMenus(item,item2,index)" class="mini-btn"
                      :class="{'active':item2.selected === 1}" size="mini">
                {{ item2.title }}
              </button>
              <view v-if="item2.type  == 'date'" class="pures-list-tab-right" :class="{'active':item2.selected === 1}">
                <view @click="timeClick(item, item2, index)" class="date-click"></view>
                <u-input type="text" v-model="beginDate" :placeholder="item2.title" placeholder-style="color:#888888;" style="width: 100%" disabled />
                <u-icon name="calendar" color="#888888" size="35"></u-icon>
              </view>
            </view>
          </view>
        </view>
        <view class="note-pop-btn">
          <u-button shape="circle" type="info" class="note-pop-btn-item" @click="cancelFun">重置</u-button>
          <u-button shape="circle" type="warning" class="note-pop-btn-item" @click="submitFun">确定</u-button>
        </view>
      </view>
    </u-popup>

    <!--套餐详情弹窗-->
    <u-popup v-model="LookTaoCanShow" mode="bottom" border-radius="34">
      <view class="lookbiji_wrap">
        <view class="details_info3">
          <view class="title">套餐详情</view>
          <view class="list_info_wrap" v-if="TaoCanDetails.length != 0">
            <view class="list_item" v-for="(itemg,indexg) in TaoCanDetails" :key="indexg">
              <view class="fucai"><span></span>{{itemg.name}}</view>
              <view class="zicai_wrap">
                <view class="zicai u-flex" v-for="(items,indexs) in itemg.list" :key="indexs">
                  <view>{{items.name}}</view>
                  <view>（{{items.num || '0'}}份）</view>
                  <view>¥{{items.price || '0.00'}}</view>
                </view>
              </view>
            </view>
          </view>
          <view v-else>
            <u-empty text="暂无套餐" mode="favor" font-size="24" icon-size="60"></u-empty>
          </view>
        </view>
      </view>
    </u-popup>
    <!-- 问号弹窗-->
    <u-popup v-model="whyShow" mode="center" border-radius="14" width="80%">
      <view class="why-box">
        <view class="why-content">购买平台为【领食惠探店】的订单:完成笔记3天后收入到账，到账后可提现;已核销但未完成笔记的订单，取消订单6天后收入到账，到账后可提现</view>
        <view class="why-btn" @click="whyShow = false">
          <text >我知道了</text>
        </view>
      </view>
    </u-popup>
    <!--日期开始和结束-->
    <u-calendar v-model="timeShow" :mode="mode" @change="timeShowFun"></u-calendar>
    <!--<view style="position: fixed;right: 0;top: 50%;z-index: 100;padding: 20rpx;background: #FFFFFF;box-shadow: 0 0 15rpx rgba(0, 0, 0, 0.1);" @click="goTop">Top</view>-->
  </view>
</template>

<script>
import ShopListPop from "@/components/shop-list/shop-list-pop.vue";
import noteListItem from "@/components/note-list-item/note-list-item.vue";
import * as dateFns from "date-fns";
const app = getApp();
export default {
  components: {ShopListPop, noteListItem},
  data() {
    return {
      shopImgUrl: app.globalData.shopImgUrl,
      imgurlBwc: app.globalData.imgurlBwc,
      statusBarHeight: '', //顶部安全区域高度
      windowHeight: '', // 获取屏幕高度
      headerHeight: 0,// 获取头部高度
      // 笔记类型tab数据
      noteTabList: [
        {
          id: 1,
          name: '到店笔记',
          value: 1,
          type: 0,
        },
        {
          id: 2,
          name: '云笔记',
          value: 2,
          type: 1,
        },
        {
          id: 3,
          name: '达人笔记',
          value: 2,
          type: 2,
        },
      ],
      noteCurrent: 0, //笔记类型tab索引
      whyShow: false, //问号弹窗
      timeShow: false, //日期弹窗
      mode: 'range', //日期选择模式
      shopListData: [], //店铺列表数据
      firstShop: '', //第一家店铺
      shopCurrent: 0, //店铺索引
      isIcon: false, //是否显示店铺图标
      orderListData: [], //订单列表数据
      isTabActive: false,//tab切换
      isTabDate: false, //tab日期切换
      customStyle: {
        width: '100%',
        height: '60rpx',
        background: '#FF6C0A',
        fontSize: '30rpx',
        lineHeight: '80rpx',
      },
      skeletonLoading: true, //加载中图片
      Bottomingrefresh: false,
      loadingstatus: 'loading',
      loadText: {
        loadmore: '轻轻上拉',
        loading: '加载中...',
        nomore: '没有更多了'
      },
      failTimeOutShow: false,
      zanwuloc: true,
      isTriggered: false, // 下拉刷新
      shopId: '', //店铺id
      startDate: '', //开始时间
      endDate: '', //结束时间
      source: 1, //笔记来源 1-堂食 2-赏金任务
      taskType: 1,
      beginDate: '', //起止时间
      pageSize: 1,
      isPass: 0, //笔记查看状态 0-未查看 1-已查看
      userInfo: {},//用户信息
      TaoCanDetails: [], // 套餐详情
      LookTaoCanShow: false, // 套餐详情弹窗
      //笔记图片滚动
      dijige: 0,
      defoImg: '',
      Shareposters: [],
      tabsHeight: '', //顶部tabs的高度

      headTabList: [
          {
            name: '待查看笔记',
            id: 1,
            cate_count: '',
          },
        {
          name: '已完成笔记',
          id: 2,
        },
      ],
      headCurrent: 0,
      noteText: '待查笔记，需您在3天内完成查看反馈，超过3天将自动转为 已完成笔记!',
      // 平台数据
      platformData: [
        {
          platformType: 1,
          title: '小红书',
          image: '/note/platform-xhs.png',
          fileList: [],
        },
        {
          platformType: 2,
          title: '抖音',
          image: '/note/platform-dy.png',
          fileList: [],
        },
        {
          platformType: 3,
          title: '大众点评',
          image: '/note/platform-dzdp.png',
          fileList: [],
        },
        {
          platformType: 4,
          title: '美团',
          image: '/note/platform-mt.png',
          fileList: [],
        },
      ],
      notePopShow: false, //筛选弹窗是否显示
      notePopData: [
        {
          id: 1,
          title: '核销时间',
          selected: 0,
          list: [
            {
              id: '1-1',
              pid: 1,
              title: '近七天',
              type: 'text',
              selected: 0,
            },
            {
              id: '1-2',
              pid: 1,
              title: '近一月',
              type: 'text',
              selected: 0,
            },
            {
              id: '1-3',
              pid: 1,
              title: '开始/结束日期',
              type: 'date',
              selected: 0,
            },
          ]
        },
        /* {
          id: 2,
          title: '笔记要求平台',
          selected: 0,
          list: [
            {
              id: 1,
              pid: 2,
              title: '小红书',
              type: 'text',
              selected: 0,
            },
            {
              id: 2,
              pid: 2,
              title: '大众点评',
              type: 'text',
              selected: 0,
            }
          ]
        } */
      ],
      submitData: [], //提交的筛选数据
      scrollTop: 0,//滚动高度
      currentScrollTop: 0,//当前滚动位置
    };
  },
  onLoad(opt) {
    
    let that = this
    let token = uni.getStorageSync('token')
    if (!token) {
      uni.reLaunch({
        url: '/pages/logon/logon'
      })
    } else {
      that.GetUserInfo()
      that.GetshopList()
      // 判断是否存在店铺ID
      /* let shopItem = uni.getStorageSync('shopItem')
      if(shopItem){
        that.shop_id = shopItem.id
        that.firstShop = shopItem.name
      } */
    }

    // 安全区域高度
    this.statusBarHeight = uni.getWindowInfo().statusBarHeight
    // 获取屏幕高度
    this.windowHeight = uni.getWindowInfo().windowHeight
    // 获取头部高度
    uni.createSelectorQuery().select('.pures-header').boundingClientRect(rect => {
      //console.log('height：', rect); // 输出元素的高度
      this.headerHeight = Number('height' in rect ? rect.height : '')
    }).exec();

  },
  methods: {
    goTop(){
      this.scrollTop = 0.1;
      this.$nextTick(() => {
        this.scrollTop = 0;
      })
    },
    onScroll(e){
      this.currentScrollTop = e.detail.scrollTop
    },
    // 下拉刷新
    onrefresherrefresh(){
      let that = this
      that.skeletonLoading = true
      that.pageSize = 1
      // 开启 下拉刷新
      that.isTriggered = true
      // 下拉刷新清空数据
      // that.orderList = []
      setTimeout(function () {
        that.GetOrderList()
        uni.stopPullDownRefresh();
        // 关闭 下拉刷新
        that.isTriggered = false
      }, 1500);
    },
    //触底加载
    onScrolltolower() {
      // console.log('已滚动到底部');
      let that = this
      that.loadText.nomore = '没有更多了'
      that.Bottomingrefresh = false
      that.loadingstatus = 'loading';
      if (that.zanwuloc == true) {
        setTimeout(function () {
          that.pageSize++;
          that.GetOrderList()
          uni.hideNavigationBarLoading()
        }, 500);
      } else {
        setTimeout(function () {
          uni.hideNavigationBarLoading()
        }, 500);
      }
    },
    //获取图片的第一张
    packageimage(data) {
      return data[0]
    },
    //取出两位小数
    toFixedTwo(val) {
      var str = Number(val).toFixed(2)
      return str;
    },
    // 笔记类型tab切换
    noteChange(res){
      let that = this
      console.log('笔记类型', res)
      that.noteCurrent = res.index
      that.source = res.item.value
      that.taskType = res.item.type
      that.loadingstatus = 'nomore'
      that.Bottomingrefresh = false
      that.pageSize = 1
      // 加载数据处理函数
      that.GetOrderList()
    },
    // tabs切换
    headChange(res){
      console.log('tabs切换', res.index)
      this.headCurrent = res.index
      let that = this
      that.loadingstatus = 'nomore'
      that.Bottomingrefresh = false
      that.pageSize = 1
      // 修改tabs的选中数据
      that.isPass = res.index
      console.log('that.isPass', that.isPass)

      // 加载数据处理函数
      that.GetOrderList()
    },
    // 筛选弹窗事件
    ClickBtnMenus(clickItem1,clickItem,clickIndex) {
      let that = this
      console.log("点击了分类==", clickItem1.title, clickItem, clickIndex)
      // 实现选中不同的分类
      const oldData = that.notePopData
      oldData.forEach((item, index) => {
        item.list.forEach((item2, index2) => {
          if(clickIndex === index){
            item2.selected = 0
          }
        })
      })
      oldData.forEach((item, index) => {
        item.list.forEach((item2, index2) => {
          if(item2.type == 'date' && clickItem.pid === item2.pid){
            that.beginDate  = ''
          }
          if(clickItem.title === item2.title){
            item2.selected = 1
          }
        })
      })
      this.$nextTick(() => {
        that.FenLeiList = oldData
      })

    },
    // 确认筛选事件
    submitFun(){
      let that = this
      // 获取今天的日期
      let today = this.$dateFns.format(new Date(), 'yyyy-MM-dd');
      // 获取七天前的日期
      let sevenDaysAgo = this.$dateFns.format(this.$dateFns.subDays(new Date(), 7), 'yyyy-MM-dd');
      // 获取一个月前的日期
      let oneMonthAgo = this.$dateFns.format(this.$dateFns.subMonths(new Date(), 1), 'yyyy-MM-dd');
      console.log('日期==', sevenDaysAgo)
      // 提交数据前清空要提交的数据
      that.notePopData.forEach((item, index) => {
        item.list.forEach((item2, index2) => {
          if(item2.selected === 1){
            if (item2.type == 'date'){
            } else {
              // 筛选赋值当天时间
              that.endDate = today
              if (item2.id === '1-1'){ //  近七天
                that.startDate = sevenDaysAgo
              } else if (item2.id === '1-2'){ // 近一个月
                that.startDate = oneMonthAgo
              }
            }
          }
        })
      })
      // 关闭弹窗
      that.notePopShow = false
      // 调用获取订单列表，重新加载数据
      that.GetOrderList()

    },
    // 重置筛选
    cancelFun(){
      let that = this
      that.notePopData.forEach((item, index) => {
        item.list.forEach((item2, index2) => {
          item2.selected = 0
        })
      })
      // 重置时间
      that.startDate = ''
      that.endDate = ''
      // 调用获取订单列表，重新加载数据
      that.GetOrderList()
    },
    //店铺数据
    GetshopList(){
      let that = this
      that.$api.GetshopList().then(res => {
        // 默认加载获取第一家店铺
        //设置默认第一个店铺id来获取订单列表
        //that.shops_id = res.result[0].id
        //that.shops_name = res.result[0].name
        /* let newList = [
          {
            id: 0,
            name: '全部店铺',
          }
        ] */
        let newList = []
        if (res.data.result.length > 0){
          console.log('店铺列表====', res.data.result)
          res.data.result.forEach(function (item, index) {
            newList.push({
              id: item.id,
              name: item.name,
            })
          });
          that.shopListData = newList
          let shopItem = uni.getStorageSync('shopItem')
          if (shopItem){
            that.firstShop = shopItem.name
            that.shopId = shopItem.id
            console.log('店铺名称', that.firstShop)
          } else {
            that.firstShop = newList[0].name
            if (that.shopId === ''){
              that.shopId = newList[0].id
            }
          }
          that.GetOrderList()
        } else {
          uni.showToast({
            title: '暂无店铺',
            icon: 'none',
          })
        }
      }).catch(err => {

      });
    },
    //获取订单列表数据
    GetOrderList(){
      let that = this
      that.$api.GetCompletedNotesAPI({
        page: that.pageSize, //分页页码，数字类型
        limit: 10, //每页条数 默认10
        shop_id: that.shopId, //店铺ID
        is_pass: that.isPass, //笔记查看状态 0-未查看 1-已查看
        start_time: that.startDate, //开始时间
        end_time: that.endDate,
        source: that.source,
        task_type: that.source === 2 ? that.noteCurrent : 0,
      }).then(res => {
        console.log('订单笔记列表', res.data.result.list)
        let noteCount = 0 //待查看笔记数量
        // 修改笔记数量
        if (that.isPass === 0){
          that.headTabList[0].cate_count = "(" + res.data.result.total + ")"
        }
        that.loadText.nomore = '没有更多了'
        that.Bottomingrefresh = false
        if (that.pageSize !== 1) {
          if (res.data.result.list.length !== 0) {
            that.loadingstatus = 'loading';
            that.orderListData = that.orderListData.concat(res.data.result.list)
          } else {
            that.loadingstatus = 'nomore'
          }
        } else {
          that.loadingstatus = 'nomore';
          that.orderListData = res.data.result.list
        }
        // console.log('订单笔记列表===', that.orderListData)
        that.skeletonLoading = false
      })

    },
    //获取用户信息
    GetUserInfo() {
      let that = this
      that.$u.post('/shop/user/info', {}).then(res => {
        console.log('账号信息', res)
        that.userInfo = res.result
        uni.setStorageSync('userinfo', res.result)
      }).catch(err => {

      });
    },
    //订单详情
    lookBiTc(data) {
      console.log('查看套餐', data);
      let that = this
      that.$api.GetOrderDetails({
        order_id: data.id
      }).then(res => {
        console.log('订单详情', res);
        that.LookTaoCanShow = true
        that.TaoCanDetails = res.data.result.package.goods
      });
    },
    //笔记要求详情
    nodeDetailFun(id){
      let that = this
      that.$api.GetgoodsList({}).then(res => {
        console.log('订单列表', res.data.result);
        if (res.data.result.length !== 0) {
          res.data.result.forEach(function (item, index) {
            if (item.id === id) {
              that.LookBiJiData = item.activity_ask
              that.LookBiJiShow = true
            }
          })
        }
      })
    },
    qiehuanle(e) {
      console.log("qiehuanleqiehuanleqiehuanle123123123", e.detail.current)
      let that = this
      //that.dijige = e.detail.current //e.detail.current
      //that.defoImg = that.Shareposters[e.detail.current]
    },
    // 店铺组件返回数据
    changeShop(res){
      let that = this
      that.pageSize = 1
      that.shopId = res.id
      that.GetOrderList()
      console.log("商铺ID===", res)
    },
    isTabActiveFun(){
      this.isTabActive = true
      this.isTabActive = true
      this.isTabDate = false
    },
    // 点击开始结束日期按钮
    timeClick(clickItem1,clickItem,clickIndex){
      let that = this
      const oldData = that.notePopData
      oldData.forEach((item, index) => {
        item.list.forEach((item2, index2) => {
          if(clickIndex === index){
            item2.selected = 0
          }
        })
      })
      oldData.forEach((item, index) => {
        item.list.forEach((item2, index2) => {
          if(clickItem.title === item2.title){
            item2.selected = 1
          }
        })
      })
      this.$nextTick(() => {
        that.FenLeiList = oldData
      })
      this.timeShow = true
    },
    //日期范围弹窗
    timeShowFun(e){
      let that = this
      that.pageSize = 1
      that.beginDate = e.startDate + ' - ' + e.endDate
      // 开始时间赋值
      that.startDate = e.startDate
      // 结束时间赋值
      that.endDate = e.endDate
      console.log("开始结束日期", that.beginDate)
    },
    //  复制笔记链接
    copy_no(url) {
      uni.setClipboardData({
        data: url, // e是你要保存的内容
        success: function () {
          uni.showToast({
            title: '复制成功',
            icon: 'none'
          })
        }
      });
    },
    goBackFun(){
      uni.reLaunch( {
        url: '/pages/index/index'
      })
    },
    // 分享至好友/群聊
    onShareAppMessage(res) {
      const userInfo = JSON.parse(uni.getStorageSync('userinfo') || '{}')
      console.log('用户信息', userInfo)
      return {
        title: '欢迎使用小程序',
        path: 'pages/index/index?shareId=' + userInfo.id,
        imageUrl: '/static/images/share.png'
      }

    },
    // 分享至朋友圈
    onShareTimeline() {},
  }
}
</script>

<style lang="scss">
page{
  height: 100%;
  background: #F4F4F4;
}
.pures {
  height: 100%;
  display: flex;
  flex-direction: column;
  position:relative;
  // 顶部导航栏css
  .pures-header{
    position: relative;
    z-index: 11;
    .pures-header-top{
      background: url("https://td.lszbg.com/public/uploads/code_shop/note-list-head-bg.png") no-repeat;
      background-size: 100% 100%;
      .pures_header_title{
        width: 100%;
        color: #FFFFFF;
        text-align: center;
        padding-left: 88rpx;
      }
      /* 笔记分类css */
      .pures_header_tab{
        width: 100%;
        height: 80rpx;
      }
      .pures-header-box{
        height: 80rpx;
        line-height: 80rpx;
        position: relative;

        .back-icon{
          position: absolute;
          padding: 20rpx;
          z-index: 10;
        }
        .pures-header-text{
          color: #FFFFFF;
          text-align: center;
          position: absolute;
          left: 0;
          right: 0;
          top: 0;
          z-index: 1;
        }
      }
      .pures-header-shop{
        height: 100rpx;
        padding: 30rpx;
        display: flex;
        justify-content: space-between;
      }
    }
    .pures-header-content{

      .pures-head-tab{
        .u-badge{
          top: 24rpx !important;
          font-size: 38rpx !important;
          color: #FF8421 !important;
          background: none !important;
        }
      }


    }
  }
  // 主题内容css
  .pures-content{
    flex: 1;
    overflow-y: auto;
    //顶部css
    .pures-head{
      padding-bottom: 120rpx;
      border-radius: 0 0 30rpx 30rpx;
      //background: linear-gradient( 180deg, #FF6C0A 0%, #FF9841 100%);
      background: url("https://td.lszbg.com/public/uploads/code_shop/my_pures_bg.png") no-repeat;
      background-size: 100% 100%;
      position: relative;
      .pures-head-left{
        padding: 40rpx;
        .pures-head-title{
          line-height: 60rpx;
          display: flex;
          .pures-head-title-text{
            font-size: 30rpx;
            color: #FFFFFF;
            margin-right: 20rpx;
          }
          .pures-head-title-icon{

          }
        }
        .pures-head-num{
          font-size: 48rpx;
          color: #FFFFFF;
          font-weight: bold;
        }
      }
      .pures-head-right{
        position: absolute;
        right: 0;
        top: calc(50% - 26rpx);
        bottom: 0;
        .pures-head-right-text{
          height: 52rpx;
          line-height: 52rpx;
          font-size: 28rpx;
          color: #FE822B;
          background: rgba(255,255,255,0.8);
          padding: 0 20rpx;
          text-align: center;
          border-radius: 80rpx 0rpx 0rpx 80rpx;
        }
      }
    }
    // 说明文字内容css
    .pures-header-content-notice{
      display: flex;
      padding: 24rpx;
      color: #FF7900;
      background: #FFF9F3;
      .pures-header-content-notice-text{
        font-size: 24rpx;
        padding-left: 20rpx;
      }
    }
    //  钱包列表css
    .pures-list{
      position: relative;
      .pures-list-item{
        margin-bottom: 24rpx;
        padding: 20rpx;
        background: #FFFFFF;
        border-radius: 20rpx;
        .pures-list-top{
          display: flex;
          margin-bottom: 20rpx;
          .pures-list-top-img{
            width: 80rpx;
            height: 80rpx;
          }
          .pures-list-top-text{
            padding-left: 22rpx;
            text-align: left;

            .pures-list-top-title{
              font-size: 28rpx;
              color: #3D3D3D;
              line-height: 40rpx;
            }
            .pures-list-top-word{
              font-size: 26rpx;
              color: #888888;
              line-height: 40rpx;
            }
            .pures-list-top-num{
              font-size: 36rpx;
              color: #3D3D3D;
              font-weight: bold;
              line-height: 60rpx;
            }
          }
        }
        .pures-list-bottom{
          padding: 30rpx 22rpx 10rpx 0;
          display: flex;
          justify-content: flex-end;
          .pures-list-btn{
            margin-left: 30rpx;
            padding: 12rpx 30rpx;
            border-radius: 30rpx;
            font-size: 26rpx;
          }
          .pures-btn-details{
            background: #F6F6F6;
            color: #3D3D3D;
            border: 2rpx solid #D2D2D2;
          }
          .pures-btn-cash{
            background: linear-gradient( 270deg, #FF7900 0%, #FF7900 100%);
            color: #FFFFFF;
          }
        }
      }
      //  pures-list-tab
      .pures-list-tab{
        // position: fixed;
        top: 0;left: 0;right: 0;z-index: 10;
        display: flex;
        justify-content: space-between;
        background: #FFFFFF;
        padding: 30rpx;
        .pures-list-tab-left{
          width: 50%;
          background: #F6F6F6;
          padding: 20rpx 10rpx;
          border-radius: 10rpx;
          margin-right: 20rpx;

          .top_info{
            .allshop{
              width: calc(100% - 20rpx);
              view:last-child{
                overflow: hidden;
                word-break: break-all;
                text-overflow: ellipsis;
                display: -webkit-box;
                -webkit-box-orient: vertical;
                -webkit-line-clamp: 2;
                white-space: nowrap;
              }
            }
          }
        }



        .pures-list-tab-active{
          background: #FFF7EF;
          border: 2rpx solid #FFBB7D;
        }
      }
      //  订单列表css
      .pures-list-content{
        .m_list_wrap{
          padding: 20rpx;
          .shop-list-item{
            padding: 20rpx;
            background: #FFFFFF;
            margin-bottom: 20rpx;
            border-radius: 15rpx;
            .shop-list-item-top {
              display: flex;
              margin-bottom: 20rpx;
              justify-content: space-between;
            }
            .shop-list-item-bottom{
              padding: 20rpx;
              border-radius: 12rpx;
              display: flex;
              //margin-bottom: 30rpx;
              .shop-list-item-img {
                width: 180rpx;
                height: 180rpx;
                border-radius: 16rpx;
                overflow: hidden;
                border: 2rpx solid #F6F6F6;
                image {
                  width: 100%;
                  height: 100%;
                }
              }
              .shop-list-item-right {
                margin-left: 30rpx;
                flex: 1;
                .shop-list-item-title {
                  font-size: 28rpx;
                  color: #333333;
                  line-height: 60rpx;
                }
                .shop-list-item-subt {
                  font-size: 24rpx;
                  color: #888888;
                  line-height: 40rpx;
                }
                .shop-list-item-plat{
                  display: flex;
                }
                .shop-list-item-price {
                  color: #FF7900;
                  line-height: 50rpx;
                }
              }
              .shop-list-item-bottom-text {
                position: relative;
                line-height: 50rpx;
                font-size: 24rpx;
                display: flex;
                text {
                }
                .nide-text {
                  color: #888888;
                  font-size: 24rpx;
                  line-height: 50rpx;
                  width: calc(100% - 200rpx);
                  height: 50rpx;
                }
                text:first-child{
                  margin-right: 20rpx;
                }
              }

              .details_info3 {
                padding: 32rpx 28rpx;
                background-color: #ffffff;
                border-radius: 28rpx;
                margin: 30rpx 0;

                .title {
                  font-size: 30rpx;
                  color: #333;
                  font-weight: bold;
                  width: 200rpx;
                  height: 54rpx;
                  margin-bottom: 28rpx;
                }

                .list_info_wrap {
                  align-items: center;
                  padding: 0 22rpx 0 22rpx;
                  margin-top: 20rpx;

                  .list_tile {
                    color: #333;
                    font-weight: bold;
                    font-size: 28rpx;
                    align-items: center;

                    span {
                      display: inline-block;
                      width: 6rpx;
                      height: 6rpx;
                      border-radius: 200rpx;
                      background-color: #999;
                      margin-right: 10rpx;
                    }
                  }

                  .list_item {
                    align-items: flex-start;
                    margin-top: 20rpx;
                    padding-left: 0;

                    .fucai {
                      font-size: 28rpx;
                      color: #333;
                      flex: 1;
                      font-weight: bold;

                      span {
                        display: inline-block;
                        width: 10rpx;
                        height: 10rpx;
                        background-color: #d4d4d4;
                        border-radius: 200rpx;
                        margin-right: 14rpx;
                      }
                    }

                    .zicai_wrap {
                      padding-left: 22rpx;
                    }

                    .zicai {
                      margin-top: 12rpx;

                      view:nth-child(1) {
                        font-size: 28rpx;
                        color: #666;
                        flex: 1;
                      }

                      view:nth-child(2) {
                        font-size: 28rpx;
                        color: #666;
                        margin-left: auto;
                      }

                      view:nth-child(3) {
                        font-size: 28rpx;
                        color: #666;
                        font-weight: bold;
                        margin-left: auto;
                      }
                    }
                  }
                }
              }

            }
            .shop-list-item-note{
              padding-top: 24rpx;
              .shop-list-item-note-title {
                font-size: 26rpx;
                color: #3D3D3D;
              }
              .shop-list-item-note-content {
                .note-url{
                  line-height: 50rpx;
                  font-size: 24rpx;
                  display: flex;
                  image {
                    width: 32rpx;
                    height: 32rpx;
                    margin-right: 6rpx;
                  }
                }
              }
              .uni-margin-wrap {
                width: 100%;
              }

              .swiper {

                //height: 812px;
                .swiper-item {
                  border-radius: 30rpx 30rpx 0 0;
                  padding-right: 20rpx;
                  image {
                    width: 100%;
                    border-radius: 30rpx 30rpx 0 0;
                  }
                }
              }
            }

          }
        }
      }
    }

  }
  // 筛选笔记css
  .note-pop-wrap{
    padding-top: 30rpx;
    padding-left: 30rpx;
    padding-right: 30rpx;
    padding-bottom: constant(safe-area-inset-bottom);
    /* 兼容 iOS < 11.2 */
    padding-bottom: env(safe-area-inset-bottom);
    /* 兼容 iOS >= 11.2 */
    .note-pop-item {
      .note-pop-item-title {
        font-size: 28rpx;
        font-weight: bold;
        color: #3D3D3D;
        line-height: 60rpx;
      }
      .note-pop-item-content {
        display: flex;
        justify-content: space-between;
        flex-wrap: wrap;
        .note-pop-item-content-item {
          margin-right: 20rpx;
          position: relative;
          margin-bottom: 20rpx;
          .btn-img1 {
            width: 84rpx;
            height: 38rpx;
            position: absolute;
            top: -16rpx;
            right: 0;
          }
          .btn-img2 {
            width: 96rpx;
            height: 38rpx;
            position: absolute;
            top: -16rpx;
            right: 0;
          }
          .pures-list-tab-right{
            width: 100%;
            background: #F6F6F6;
            padding: 0 10rpx;
            border-radius: 10rpx;
            display: flex;
            justify-content: space-between;
            position: relative;
            .date-click  {
              width: 100%;
              height: 100%;
              position: absolute;
              top: 0;
              left: 0;
              right: 0;
              z-index: 10;
            }
          }
        }
        .note-pop-item-content-item:last-child {
          margin-right: 0;
        }

        .mini-btn {
          background-color: #F6F6F6;
          border: none; /* 去掉按钮本身的边框 */
          box-shadow: none;
          padding: 8rpx 20rpx;
        }

        .active {
          color: #FF7900;
          border: 1px solid #FFBB7D;
          background: #FFF7EF;
        }

        /* 去掉伪元素上的边框 */
        .mini-btn::after {
          border: none;
        }
      }
    }
    .note-pop-btn{
      display: flex;
      .note-pop-btn-item {
        margin: 0 10rpx;
        width: 50%;
      }
    }

    .active {
      color: #FF7900;
      border: 1px solid #FFBB7D;
      background: #FFF7EF;
    }
  }

  //套餐详情
  .lookbiji_wrap {
    padding: 30rpx;
    background-color: #F4F4F4;
    .details_info3 {
      padding: 32rpx 28rpx;
      background-color: #ffffff;
      border-radius: 28rpx;
      margin: 30rpx 0;

      .title {
        font-size: 30rpx;
        color: #333;
        font-weight: bold;
        width: 200rpx;
        height: 54rpx;
        margin-bottom: 28rpx;
      }

      .list_info_wrap {
        align-items: center;
        padding: 0 22rpx 0 22rpx;
        margin-top: 20rpx;

        .list_tile {
          color: #333;
          font-weight: bold;
          font-size: 28rpx;
          align-items: center;

          span {
            display: inline-block;
            width: 6rpx;
            height: 6rpx;
            border-radius: 200rpx;
            background-color: #999;
            margin-right: 10rpx;
          }
        }

        .list_item {
          align-items: flex-start;
          margin-top: 20rpx;
          padding-left: 0;

          .fucai {
            font-size: 28rpx;
            color: #333;
            flex: 1;
            font-weight: bold;

            span {
              display: inline-block;
              width: 10rpx;
              height: 10rpx;
              background-color: #d4d4d4;
              border-radius: 200rpx;
              margin-right: 14rpx;
            }
          }

          .zicai_wrap {
            padding-left: 22rpx;
          }

          .zicai {
            margin-top: 12rpx;

            view:nth-child(1) {
              font-size: 28rpx;
              color: #666;
              flex: 1;
            }

            view:nth-child(2) {
              font-size: 28rpx;
              color: #666;
              margin-left: auto;
            }

            view:nth-child(3) {
              font-size: 28rpx;
              color: #666;
              font-weight: bold;
              margin-left: auto;
            }
          }
        }
      }
    }
  }

  //立即提现css
  .san_btn_wrap {
    padding: 26rpx 30rpx;
    position: absolute;
    right: 10rpx;
    top: calc(50% - 120rpx);
    z-index: 10;

    .san_btn_item {
      //display: flex;
      padding: 18rpx 50rpx;
      text-align: center;
      align-items: center;
      background: rgba(255,255,255,0.8);
      border-radius: 50rpx;
      .san-icon {
        padding: 10rpx;
      }
      text {
        font-size: 32rpx;
        color: #FE822B;
        margin-top: 12rpx;
        font-weight: 500;
      }
    }
  }
  //  问号弹窗css
  .why-box{
    padding: 40rpx;
    .why-content{
      font-size: 28rpx;
      color: #3D3D3D;
      line-height: 56rpx;
      text-align: center;
    }
    .why-btn{
      margin-top: 40rpx;
      background: linear-gradient( 104deg, #F18F2C 0%, #FF7A00 100%);
      border-radius: 50rpx;
      padding: 20rpx 0;
      text-align: center;
      text{
        font-size: 28rpx;
        color: #FFFFFF;
        text-align: center;
      }
    }
  }

}
/* 懒加载css */
.lanjiazai_wrap {
  position: relative;
  z-index: 10000;
  text-align: center;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  color: #999;
  padding: 50rpx 0;
  .lanjiazai_item {
    text-align: center;
    .loading_icon {
      width: 120rpx;
      height: 120rpx;
    }
    .loading_gif {
      width: 120rpx;
      height: 120rpx;
    }
  }
}
</style>
